<template>
	<!-- 热门推荐组件  (注意大)-->
	<list-box :name="name" :word="word" :params="params" >
		<!-- swiper标签是左右切换 -->
		<!-- next-margin漏出一个小角 还有第二页 next-margin="20rpx" -->
		<!--:style="{height:`${200*rows}rpx`}" || 动态的显示有多少行数据改变的它的高度 目前:4*200height= 800rpx -->
		<swiper next-margin="20rpx" class="list-swiper" :style="{height:`${200*rows}rpx`}">
			<swiper-item  class="swiper-item" v-for="(n,index) in column" :key="index">
					<!-- item 进行一个数据  传递  给全局的（热门推荐）courseItem 子组件 -->
					<!-- 计算行
					slice(start,end)（开始下标,结束下标） 获取数组中指定范围元素数组 包头不包尾
					rows = 4 
					index = 当前有多少列  column
					开始下标 0   结束下标是 4
					index*rows  得到开始下标0
					(index+1)*rows  得到结束下标 4
					公式：0 ， 4
					index*rows ,(index+1)*rows
					 -->
					 
					 <u-skeleton
						style="margin-top:20rpx"
					 	rows="2"
					 	title
					 	titleWidth="80%"
					 	titleHeight="20"
					 	:loading="loading"
					 	avatar
					 	avatarShape="square"
					 	avatarSize="90"
					 	rowsHeight="14"
						v-for = "(item,n) in 4"
					 >
					<course-item v-for = "(item,n) in courseData.slice(index*rows ,(index+1)*rows) " :key="n" :item ="item"></course-item>
					</u-skeleton>
			</swiper-item>
		</swiper>
	</list-box>
</template>

	
<script>
	//热门推荐的头部组件
	import listBox from './list-box.vue'
	// 公共组件的components  的course-item 组件
	import courseItem from '@/components/common/course-item.vue'
	//mock虚拟数据
	import courseData from '@/mock/courseData.js'
	export default{
		components:{listBox,courseItem},
		props:{
			name:{	//标题
				type:String,
				default:''
			},
			word:{		//字符串HOT
				type:String,
				default:null
			},
			column:{  //列
				type:Number,
				default:2,
			},
			rows:{		//行
				type:Number,
				default:4
			},
			courseData:{  //数据
				type:Array,
				default:()=>courseData
			},
			params:Object// 点击全部 按钮要向搜索页传递的参数  父组件 index.vue 传过来 在传给list-box 
				
		
		},
	
	
		data(){
			return{
				loading:true,
			}
		},
		mounted() {
			// 延时2秒钟
			uni.$u.sleep(2000).then(() => {
				this.loading = false
			})
		}
	}
</script>

<style lang="scss">
		
</style>
